﻿@{
    ViewData["Title"] = "LocationDefiView";
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"]</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .toolbar {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

            .toolbar .label-container {
                flex-shrink: 0;
                margin-right: 5px;
            }

            .toolbar .select-container {
                max-width: 200px;
                margin-right: 10px;
            }

                .toolbar .select-container select {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 5px;
                }

            .toolbar button {
                margin-right: 5px;
            }

        .layui-table-cell {
            text-align: center;
        }
    </style>
</head>
<body>

    <br />
    <div class="toolbar">
        <div class="label-container">
            <label>所属客户：</label>
        </div>
        <!-- 下拉框查询所属客户 -->
        <div class="select-container layui-form">
            <div class="layui-col-md8">
                <select id="customer" name="customer" lay-filter="customer">
                    <option value="">--请选择--</option>
                </select>
            </div>
        </div>

        <button class="layui-btn layui-btn-primary" id="restButton">重置</button>
        <button class="layui-btn" id="searchButton">查询</button>
        <button class="layui-btn layui-btn-normal" id="addButton">录入</button>
    </div>

    <!-- 数据表格 -->
    <table id="mainData" lay-filter="mainData" style="margin-top: 10px; width: 100%;"></table>

    <script type="text/html" id="operationBar">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="update">修改</button>
    </script>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.all.js"></script>

    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;

            // 初始化下拉框
            function loadCustomerOptions() {
                $.ajax({
                    url: '/BinLocationDefinition/GetClient', // 修改为对应的接口地址
                    type: 'GET',
                    success: function (res) {
                        var options = "<option value=''>--请选择--</option>";
                        res.data.forEach(function (item) {
                            options += `<option value="${item.chineseName}">${item.chineseName}</option>`;
                        });
                        $("#customer").html(options);
                        form.render('select');
                    }
                });
            }


          function showData() {
            table.render({
                elem: '#mainData',
                url: '/BinLocationDefinition/GetEmptySpace',
                method: 'get',
                where: {
                    customer: $("#customer").val()
                },
                page: true,
                limit: 10,
                limits: [10, 20, 30],
                 cols: [[
                        { field: 'repositoryId', title: '仓库', width: 120, sort: true, align: 'center' },
                        { field: 'theLocationType', title: '库位类型', width: 120, align: 'center' },
                        { field: 'theLocationCode', title: '库位编码', width: 120, align: 'center' },
                        { field: 'customer', title: '所属客户', width: 120, align: 'center' },
                        { field: 'binLocationAttributes', title: '库位属性', width: 120, align: 'center' },
                        { field: 'pickupOrder', title: '取货次序', width: 120, align: 'center' },
                        { field: 'maxVolume', title: '最大体积', width: 120, align: 'center' },
                        { field: 'maxWeight', title: '最大重量', width: 120, align: 'center' },
                        { field: 'listingOrder', title: '上架次序', width: 120, align: 'center' },
                        { field: 'wide', title: '宽度', width: 120, align: 'center' },
                        { field: 'long', title: '长度', width: 120, align: 'center' },
                        { field: 'high', title: '高度', width: 120, align: 'center' },
                        { field: 'largestPallets', title: '最大托盘', width: 120, align: 'center' },
                        { field: 'xcoordinates', title: 'X坐标', width: 120, align: 'center' },
                        { field: 'ycoordinates', title: 'y坐标', width: 120, align: 'center' },
                        { field: 'zcoordinates', title: 'z坐标', width: 120, align: 'center' },
                          {fixed: 'right', title: '操作', toolbar: '#operationBar', width: 180, align: 'center'}
                    ]],
                parseData: function(res) {
                    return {
                        code: res.code,
                        count: res.count,
                        data: res.data
                    };
                },
                loading: true, // 显示加载动画
                done: function(res, curr, count) {
                    console.log('分页数据加载完成:', res, curr, count);
                }
            });


              // 监听工具条操作
        table.on('tool(mainData)', function (obj) {
            var data = obj.data; // 获取当前行的数据
            var layEvent = obj.event; // 获取 lay-event 对应的值（如 "delete" 或 "update"）

            if (layEvent === 'delete') {
                // 删除操作
                layer.confirm('确定要删除这条记录吗？', function (index) {
                    // 调用删除接口
                    $.ajax({
                        url: '/BinLocationDefinition/DeleteBinLocationDefi', // 修改为删除接口地址
                        type: 'POST',
                        data: { id: data.id }, // 假设每条记录有唯一标识 id
                        success: function (res) {
                            if (res == 1) {
                                layer.msg('删除成功', { icon: 1 });
                               showData(); // 刷新表格数据
                            } else {
                                layer.msg('删除失败: ');
                            }
                        },
                        error: function () {
                            layer.msg('删除失败');
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'update') {
                // 编辑操作
                layer.open({
                    type: 2, // page 层类型
                    area: ['800px', '600px'],
                    title: '编辑仓位定义信息',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: `/BinLocationDefinition/EditLocationDefi?id=${data.id}`, // 修改为编辑页面的地址
                    end: function () {
                        showData(); // 刷新表格数据
                    }
                });
            }
        });

    }

           // 重置按钮事件
                 document.getElementById('restButton').addEventListener('click', function () {
                 $("#customer").val("");
                 showData();
                 form.render('select');
                 });

               // 添加
                 document.getElementById('addButton').addEventListener('click', function () {
                 layer.open({
                   type: 2, // page 层类型
                   area: ['800px', '600px'],
                   title: '添加仓位定义信息',
                   shade: 0.6, // 遮罩透明度
                   shadeClose: true, // 点击遮罩区域，关闭弹层
                   maxmin: true, // 允许全屏最小化
                   anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '/BinLocationDefinition/CreateLocationDefi',
                    end: function ()
                    {
                        showData(); // 刷新表格数据
                    }
                         });
                 });


            // 页面初始化
            loadCustomerOptions();
            showData();

            // 查询按钮点击事件
            $("#searchButton").on("click", function () {
                showData();
            });


        });
    </script>

</body>
</html>